<template>
	<view class="index-container">
		<!-- first box -->
		<button class="box first" open-type="contact">
			<text class="fontweigth ">永久免费，客服一对一辅导</text>
			<view class="button btnno"> 客服 <uni-icons type="right" size="10" color="#0587fe"></uni-icons>
			</view>
		</button>
		<!-- second box -->
		<view class="second flex space-between">
			<view class="box second-left">
				<view class="title">临时签到 </view>
				<view class="text">
					签到一次有效 <br>
					可指定名单/位置签到 <br>
					快捷获取签到码
				</view>
				<view class="button" @click="goAddSignIn(1)">
					立即创建
					<uni-icons type="right" size="10" color="#0587fe"></uni-icons>
					<!-- <text>></text> -->
				</view>
				<!-- 		<view class="cover">
					<image src="/static/images/index/qwf_03.png" mode="widthFix"></image>
				</view> -->
			</view>
			<view class="box second-right">
				<view class="title">长期签到</view>
				<view class="text">
					每日多区间签到<br>
					可指定名单/位置签到<br>
					快捷获取签到码
				</view>
				<view class="button" @click="goAddSignIn(2)">
					立即创建
					<uni-icons type="right" size="10" color="#0587fe"></uni-icons>
				</view>
				<!-- 	<view class="cover">
					<image src="/static/images/index/qwf_05.png" mode="widthFix"></image>
				</view> -->
			</view>
		</view>
		<!-- three box -->
		<view class="box ">
			<view class="title">考勤签到 </view>
			<view class="text">
				每日多区间签到，可指定名单/位置签到快捷获取签到码


			</view>
			<view class="button" @click="goAddSignIn(4)">
				立即创建
				<uni-icons type="right" size="10" color="#0587fe"></uni-icons>
			</view>
			<!-- <view class="cover bigcover">
				<image src="/static/images/index/qwf_09.png" mode="widthFix"></image>
			</view> -->

		</view>
		<!--fore box -->
		<view class="box ">
			<view class="title">自由签到 </view>
			<view class="text">
				不限次数签到，快捷获取签到码
			</view>
			<view class="button" @click="goAddSignIn(3)">
				立即创建
				<uni-icons type="right" size="10" color="#0587fe"></uni-icons>
			</view>
			<!-- 	<view class="cover bigcover">
				<image src="/static/images/index/qwf_11.png" mode="widthFix"></image>
			</view> -->

		</view>
		<!--five box -->
		<view class="box " @click="toMiniProgram(item.rule)" v-for="(item,index) in listdata" :key="index">
			<view class="title">{{item.name}} </view>
			<view class="text">
				{{item.introduce}}
			</view>
			<view class="button">
				立即创建
				<uni-icons type="right" size="10"></uni-icons>
			</view>
			<!-- 	<view class="cover bigcover">
				<image src="/static/images/index/qwf_13.png" mode="widthFix"></image>
			</view> -->
		</view>
		<!-- six box -->
		<view class="second flex space-between">

			<button class="box second-right" open-type="contact">
				<view class="title">意见反馈 <uni-icons type="right" size="10" color></uni-icons>
				</view>
				<view class="text">
					bug/功能
					意见反馈
				</view>
				<!-- 	<view class="cover">
					<image src="/static/images/index/qwf_16.png" mode="widthFix"></image>
				</view> -->
			</button>

			<view class="box second-right" @click="helpcenter">
				<view class="title"> 帮助中心 <uni-icons type="right" size="10" color></uni-icons>
				</view>
				<view class="text">
					详细功能解读
				</view>
				<!-- 	<view class="cover">
					<image src="/static/images/index/qwf_18.png" mode="widthFix"></image>
				</view> -->

			</view>
		</view>


		<!-- 底部占位 -->
		<view class="height50upx">

		</view>
	</view>
</template>

<script>
	import {
		getConfig
	} from '@/api/index.js';
	export default {
		data() {
			return {
				listdata: []
			}
		},
		onShow() {
			getConfig({
				data: {}
			}).then(res => {
				if (res.code == 1) {
					console.log(res.data.button, 'data')
					this.listdata = res.data.button
				}
			})
		},
		methods: {


			toMiniProgram(val) {
				console.log(val, 'valvalvalvalval');
				uni.navigateToMiniProgram({
					appId: val,
					// path:'/pages/index/index',
				})
			},
			Feedback() {
				uni.navigateTo({
					url: ""
				})
			},
			helpcenter() {
				uni.navigateTo({
					url: "../me/help"
				})
			},
			goAddSignIn(e) {
				uni.navigateTo({
					url: `add-signIn?type=${e}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.index-container {
		padding: 10upx 20upx;
		min-height: 100vh;
		background-color: #fff;

		// 图片
		.cover {
			position: absolute;
			right: 10upx;
			bottom: 10upx;
			width: 160upx;
			height: 160upx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.bigcover {
			bottom: 50upx;
			width: 190upx;
		}

		.box {
			border-radius: 8upx;
			padding: 25upx;
			box-shadow: 0 0 6upx #cccccc;
			background-color: #fff;
			margin-top: 20upx;

			&::after {
				border: none;

			}

			.title {
				line-height: 1;
				font-weight: 700;
				font-size: 32upx;
				display: flex;
				align-items: center;
				z-index: 3;

				text {

					z-index: 3;
					margin-left: 8upx;
					border-radius: 50upx;
					width: 15upx;
					height: 15upx;
					background-color: #0587fe;
					color: #fff;
					text-align: center;
					line-height: 15upx;
					padding: 8upx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}

			.text {
				line-height: 30upx;
				text-align: left;
				z-index: 3;
				margin-top: 20upx;
				font-size: 24upx;
				color: #6d6d6d;
				margin-bottom: 50upx;
			}

			.button {
				z-index: 3;
				width: 200upx;
				font-size: 28upx;
				height: 67upx;
			}

			.btnno {
				width: 140upx;
				height: 55upx;
			}

		}

		.button {
			margin-left: 15upx;
			background-color: #0587fe;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 6upx 19upx;
			border-radius: 50upx;


			text {
				margin-left: 8upx;
				border-radius: 50upx;
				width: 15upx;
				height: 15upx;
				background-color: #fff;
				color: #0587fe;
				text-align: center;
				line-height: 15upx;
				padding: 6upx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.first {
			display: flex;
			align-items: center;
			font-size: 28upx;
			padding: 14upx;
			margin: 0;

		}

		.second {


			.second-left {
				margin-right: 15upx;
				width: 345upx;

			}

			.second-right {
				margin-left: 0;
				width: 345upx;
			}
		}


	}
</style>
